<template>
  <section>
    这是子产品
    <h5>{{ name }}</h5>
    <p>{{ num }}</p>

    <span>{{ remark }}</span>
  </section>
</template>

<script >
import { onMounted, toRefs } from 'vue'
export default {
  props: {
    // 父传子接
    name: {
      type: String,
      default: '标题'
    },

    num: String,
    remark: String
  },

  emits: ['hello'],

  setup (props, context) {
    // eslint-disable-next-line no-unused-vars
    const { name, num, remark } = toRefs(props)
    const { emit } = context

    console.log(props.name, '--------')

    function hello () {
      // 调用父组件的方法并传值
      emit('hello', 666)
    }

    onMounted(() => {
      hello()
    })

    return {
      hello
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
